<template>
  <div>
    <el-tree
        :data="selectMenus"
        show-checkbox
        node-key="id"
        ref="tree"
        :check-strictly="true"
        :default-expanded-keys="checkedKeys"
        :default-checked-keys="checkedKeys">
    </el-tree>
    <br/>
    <el-button type="success" size="small" @click="submit">提交</el-button>
    <el-button type="danger" size="small" @click="cancel">取消</el-button>
  </div>

</template>

<script>
import { get, post } from "@/plugins/axios";
import {Message} from "element-ui";

export default {
  name: "BindingMenus",
  created() {
    this.getSelectMenus()
    this.getCheckedMenuId()
  },
  props: ['id'],
  data() {
    return {
      selectMenus: [],
      uri: {
        selectMenu: '/menu/menuTreeLabel',
        bindingMenus: '/menu/bindingMenus',
        checkedMenuIdByRoleId: '/menu/checkedMenuIdByRoleId'
      },
      checkedKeys: []
    }
  },
  methods: {
    getSelectMenus() {
      const param = {
        type: 'L:M'
      }
      get(this.uri.selectMenu, param, response => {
        if (response.code === 200) {
          this.selectMenus = response.data
        }
      })
    },
    getCheckedMenuId() {
      const param = {
        roleId: this.id
      }
      get(this.uri.checkedMenuIdByRoleId, param, response => {
        if (response.code === 200) {
          this.checkedKeys = response.data
        }
      })
    },
    submit() {
      const param = {
        roleId: this.id,
        menuIds: this.$refs.tree.getCheckedKeys()
      }
      post(this.uri.bindingMenus, param, response => {
        if (response.code === 200) {
          Message.success(response.message)
          this.$emit('update:bindingMenusDialogShow',false)
        }
      })
    },
    cancel() {
      this.$emit('update:bindingMenusDialogShow', false)
    }
  }
}
</script>

<style scoped>

</style>